import React, { Component } from "react";
// 直接import加路径就可以引入样式文件了，我们一般是一个文件夹下，js文件写逻辑和结构，css文件写样式。这个文件夹就构成了一个组件
import "./App.css";

export default class App extends Component {
  render() {
    /*
      react中不允许直接写行内样式，而是写成对象形式，如果你有vue基础的话，你可能以为下面代码里的style是双大括号的模板语法
      其实不是，这是react的单大括号模板语法里放了个对象

      其实就等同于下面这样写，由于js对象不允许属性名中带有 - 这个符号，所以我们要采用驼峰的格式
      let obj = {
        backgroundColor: "yellow"
      }

      <div style={obj}></div>

      另外，class属性在react中是className
    */ 
    return (
      <div className="red" style={{ backgroundColor: "yellow" }}>
        {12 + 23}
      </div>
    );
  }
}
